Cocos Creator 3D 蚂蚁庄园系列技术分享

编者按

“游戏开发小赤佬，也玩 python 和 shell”白玉无冰是“Cocos 荣耀讲师”征稿活动第1期的获奖作者之一，除了征稿作品《用摄像机实现残影幻影拖尾效果》之外，拥有多年 Cocos 游戏开发经验的他，还十分善于做技术总结，其个人公众号输出了大量的开发经验，感谢白玉无冰 。

以下为白玉无冰使用 Cocos Creator 3D 开发"蚂蚁庄园"项目的技术分享，包括上篇蚂蚁庄园登山赛和下篇蚂蚁庄园运动会星星球。

   上篇：蚂蚁庄园登山赛

游戏体验：

http://lamyoung.gitee.io/web/jumpGame

效果预览：

配置环境：

Cocos Creator 3D v1.0.0

寻找 3D 资源花费了我大半天的时间，开发 3D 游戏不易呀！最终我还是向KUOKUO 大佬那捞了一只鸡(鸭？)来用。由于是第一次写 3D 项目的技术分享，摄像机镜头调了多次才达到预想的效果。

天空盒素材来源于网络

实现原理：

生成道路是用预制资源，代码动态生成：

const element: Node = instantiate(this.prefab_land);
this.node_tree.addChild(element);

摄像机跟着小鸡一起往前移动(我写的是 z 轴移动)：

update(deltaTime: number) {
    this.camera_game.node.setPosition(this.camera_game.node.position.x, this.camera_game.node.position.y, this.role.node.position.z)
}

监听 TOUCH_MOVE 事件控制小鸡左右移动，并要判断边界。注意手指移动的变化和实际屏幕看到的大小是不一样的，这是因为摄像机投影的原因。我是乘了一个系数，可能有其他方法判断？

private onTouMove(touch: Touch) {
    const delta = touch.getUIDelta();
    let targetX = this._curPos.x - delta.x * 1e-2;
    if (targetX > 4.5) targetX = 4.5;
    if (targetX < - 4.5) targetX = -4.5;
    this._curPos.x = targetX;
}

往前跳的运动就是修改y(跳跃) 和 z(往前)的数值啦。

jumpRun() {
    this._curPos.z += 0.1;
    if (Math.floor(this._curPos.z / 2) > this._curIndex) {
        this._curPos.y = 0;
        this._curIndex++;
        this.node.emit('JumpEnd', this._curIndex);
    }
    if (this._curPos.z % 2 < 1) {
        this._curPos.y += 0.2;
    } else {
        this._curPos.y -= 0.2;
    }
}

   下篇：蚂蚁庄园运动会星星球

游戏体验：

http://lamyoung.gitee.io/web/ballGame

效果预览：

配置环境：

Cocos Creator 3D v1.0.0

实现方案：

小球点击：3D 里节点无法用 cc.Node.EventType.TOUCH_START 监听，最终在论坛上找到一个 raycast 解决方法。

参考代码如下：

start() {
    systemEvent.on(SystemEventType.TOUCH_START, this.onClickBall, this);
}
private _ray = new geometry.ray();
private onClickBall(touch: Touch, event: EventTouch) {
    const pos = touch.getLocation();
    this.camera.screenPointToRay(pos.x, pos.y, this._ray);
    const result: { node: Node }[] = this.node_ball_click.scene.renderScene['raycast'](this._ray);
    if (result.some((i) => {
        if (i.node === this.node_ball_click) {
            return true;
        }
    })) {
        //点击到小球处理逻辑
    }
}

其中 result 返回的是一个包含 node 节点的结果数组，获取后需要判断一下是否为小球节点。这个方案消耗性能比较大，后续应该会有更好的解决方案，也期待大家可以一起交流。

动画系统：采用了编辑器的动画编辑器，对需要部分增加动画效果。由于我的资源是网上找的，那只鸡有些身体部分切割的不好，所以小鸡的动画比较差一些。

需要注意的是动画编辑器里的 rotation 属性，与节点里的属性面板的 rotation 对应不上，而应该采用 eulerAngles 的属性。

据说后续版本会处理？

小球轨迹：采用 tween 控制小球坐标数值，先移动到最高点，然后再移动到最低点。

在运动轨迹中加入一些随机值，就可以达到不同位置的效果啦。

tweenUtil(this._node_balll_pos)
    .stop()
    .to(time, new math.Vec3((this.node_ball.position.x + BALL_INIT_X) / 2, BALL_MAX_Y * (0.8 + 0.2 * Math.random()), targetZ / 2))
    .to(time, new math.Vec3(BALL_GAMEOVER_X, BALL_MIN_Y, targetZ))
    .start();

   总结

完成这个小功能主要遇到的问题是 3D 节点点击事件和动画系统的 rotation 的问题，不过这些都在论坛里找到了相应的解决方法。

开发 3D 项目还是非常需要掌握一些基础知识，例如正交投影，透视投影，点光源，平行光源等，我也是在 webgl 编程指南里学到的，建议看看！

以上就是我最新的学习成果！如有问题或新的想法欢迎留言！欢迎感兴趣的开发者关注我的个人公众号获取本项目源码，我也定期分享我的学习心得和开发经验。

再次感谢白玉无冰为社区所作的贡献！此外，Cocos Creator 3D v1.0.1 正在社区进行火热公测，欢迎各位开发者下载体验！

https://forum.cocos.org/t/cocos-creator-3d-v1-0-1/85773。

如果您在使用 Cocos Creator 2D/3D 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

更

多

精

彩

我就知道你“在看”▼

文中使用素材均来自网络！版权归原作者所有，如有侵权还请联系！